<template>
  <div class="dashboard-container">
    <el-page-header style="margin-bottom: 20px" content="供应商来料规格书" @back="goBack" />
    <el-divider />
    <el-row v-if="chipSpec != null">
      <el-row>
        <el-col>
          <el-descriptions :column="1">
            <el-descriptions-item label="供应商">{{ chipSpec.supplier }}</el-descriptions-item>
            <el-descriptions-item label="芯片型号">{{ chipSpec.chip_no }}</el-descriptions-item>
            <el-descriptions-item label="来料时间">{{ chipSpec.incoming_time }}</el-descriptions-item>
            <el-descriptions-item label="锐科编号">{{ chipSpec.raycus_no }}</el-descriptions-item>
            <el-descriptions-item label="规格书">
              <el-link type="primary" :href="chipSpec.spec_file_uri" target="_blank">{{ chipSpec.spec_file_uri }}</el-link>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        size="medium"
        :span-method="objectSpanMethod"
        :header-cell-style="headerCellStyle"
        :cell-style="firstCellStyle"
        style="margin-top: 10px"
      >
        <el-table-column label="参数类型" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.item }}
          </template>
        </el-table-column>
        <el-table-column label="参数" header-align="center" align="left">
          <template slot-scope="scope">
            {{ scope.row.parameter }}
          </template>
        </el-table-column>
        <el-table-column label="符号" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.symbol }}
          </template>
        </el-table-column>
        <el-table-column label="单位" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="测试条件" width="130" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.test_condition }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最小值" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.min_value }}
          </template>
        </el-table-column>
        <el-table-column label="典型值" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.typical_value }}
          </template>
        </el-table-column>
        <el-table-column label="最大值" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.max_value }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import { getChipSpec } from '@/api/chip_spec'

export default {
  name: 'TestReport',
  directives: { waves },
  data() {
    return {
      chipId: this.$route.query.chipId,
      list: null,
      listLoading: true,
      chipSpec: {},
      form: {
        name: 'xxxx',
        desc: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    headerCellStyle({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #FAFAFA !important'
      }
    },
    firstCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'background-color: #FAFAFA !important'
      }
    },
    fetchData() {
      this.listLoading = true
      getChipSpec({ chipId: this.$data.chipId }).then(response => {
        this.chipSpec = response.data
        // window.console.log(this.chipSpec)
        this.list = this.chipSpec.params.photoelectric_parameter.concat(this.chipSpec.params.structure_parameter)
          .concat({
            item: '特殊要求',
            parameter: this.chipSpec.special_requirements
          })
        // window.console.log(this.list)
        this.listLoading = false
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 12,
            colspan: 1
          }
        } else if (rowIndex === 12) {
          return {
            rowspan: 5,
            colspan: 1
          }
        } else if (rowIndex === 17) {
          return {
            rowspan: 1,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

      if (rowIndex === 17) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1
          }
        } if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 7
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px 0px 80px 0px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-table .tableHeaderStyle {
  background-color: #1989fa !important;
  color: #fff;
}

</style>
